<!-- @format -->

<template>
	<div class="ma-content-block lg:flex justify-between p-4">
		<!-- CRUD 组件 -->
		<ma-crud :options="options" :columns="columns" ref="crudRef">
			<!-- <template #dept_id="{ record }">
				<a-tag color="blue">{{ record?.dept?.name }}</a-tag>
			</template> -->
			<template #car_no="{ record }">
				<span v-for='(item,index) in record.car' :key="index" style='margin-right:8px'>
					<a-tag color="blue" >{{ item?.car_no }}</a-tag>
				</span>
			</template>
			<template #driver_user_id="{ record }">
				<!-- 对标题加上 tag -->
				<a-tag color="blue">{{ record?.duser?.nickname }}</a-tag>
			</template>
			<template #tableBeforeButtons>
				<a-button type="primary" @click="addDriver">
					新增
				</a-button>
			</template>

			<template #operationBeforeExtend="{ record }">
				<a-button type="text" @click="eidtDriver(record)" class="edit">
					编辑
				</a-button>
				<a-button type="text" @click="shenheDriver(record)" class="edit" v-auth="['prediction:driver:rz']" v-if='false'>
					审核
				</a-button>
				<a-button type="text" @click="suoshuDriver(record)" class="edit" >
					所属车辆
				</a-button>
			</template>
			
		</ma-crud>

		<a-modal :mask-closable="false"  width="620px" v-model:visible="visibleRecord" :footer="false">
			<template #title> {{types == 1?'添加司机':'编辑司机'}} </template>
			
			<driverForm @submit="update" @close="visibleRecord = false" v-if="visibleRecord" :form="forms" :types="types"></driverForm>

			<!-- prediction/driverCar/index?driver_id=xx 司机的车辆
			prediction/driverCar/save 车辆保存  -->
			<!-- prediction/driverCar/update/id 修改车辆 data传创建车辆的字段 -->
			<!-- driver_id:司机ID car_type:'车型',car_no:'车牌号',car_license:'行驶证照片'，is_default：是否默认 -->
		</a-modal>

		<a-modal :mask-closable="false"  width="620px" v-model:visible="visibleShenhe" :on-before-ok="handleIsOk">
			<template #title> 认证审核 </template>
			<div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">公司名称</div>
					<div style="flex:1">
						<a-input v-model="forms.deptname" disabled placeholder="请输入公司名称" />
					</div>
					
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">姓名</div>
					<div style="flex:1">
						<a-input v-model="forms.driver_name" disabled placeholder="请输入姓名" />
					</div>
					
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">身份证号码</div>
					<div style="flex:1">
						<a-input v-model="forms.drive_crad" disabled placeholder="请输入身份证号" />
					</div>
					
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">手机号</div>
					<div style="flex:1">
						<a-input v-model="forms.mobile" disabled placeholder="请输入手机号" />
					</div>
					
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">行驶证照片</div>
					<a-image
						width="200"
						height="120"
						:src="forms.driver_license"
					/>
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">身份证正面照</div>
					<a-image
						width="200"
						height="120"
						:src="forms.card_front"
					/>
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">身份证背面照</div>
					<a-image
						width="200"
						height="120"
						:src="forms.card_back"
					/>
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">审核认证</div>
					<a-space direction="vertical" size="large">
						<a-radio-group v-model="forms.driver_status" :options="plainOptions" />
					</a-space>
				</div>
				<div style="display:flex;margin-bottom:3%">
					<div style="width:100px">备注</div>
					<div style="flex:1">
						<a-textarea placeholder="" v-model="forms.remark" allow-clear/>
					</div>
					
				</div>
			</div>
		</a-modal>

		<!-- 所属车辆 -->
		<a-drawer
			:footer="false"
			:width="1400"
			v-model:visible="visiblesuoshu"
			@cancel="handlesuoshuCancel"
		>
			<template #title> 所属车辆 </template>
			<driverCar ref="stationRef" @handlecolse="handlecolse" :id="sijiId" v-if='visiblesuoshu'/>
		</a-drawer>	
	</div>
</template>
<script setup>
	import { ref, reactive } from "vue";
	import predictionDriver from "@/api/prediction/predictionDriver";
	import { Message } from "@arco-design/web-vue";
	import tool from "@/utils/tool";
	import * as common from "@/utils/common";
	import driverForm from "./driverForm.vue";
	import driverCar from "../driverCar/index.vue";
	import { request } from "@/utils/request.js";
	const crudRef = ref();
	const visibleShenhe = ref(false)
	const sijiId = ref()
	const visiblesuoshu = ref(false)
	const plainOptions = ref([
        { label: '已通过', value: 1 },
        { label: '已驳回', value: 2 },
	])
	const suoshuDriver = (e) =>{
		sijiId.value = e.id
		visiblesuoshu.value = true
	}
	const handlecolse = (e)=>{
		visiblesuoshu.value = false
	}
	const numberOperation = (newValue, id, numberName) => {
		predictionDriver
			.numberOperation({ id, numberName, numberValue: newValue })
			.then((res) => {
				res.success && Message.success(res.message);
			})
			.catch((e) => {
				console.log(e);
			});
	};

	const switchStatus = (statusValue, id, statusName) => {
		predictionDriver
			.changeStatus({ id, statusName, statusValue })
			.then((res) => {
				res.success && Message.success(res.message);
			})
			.catch((e) => {
				console.log(e);
			});
	};
	const handleIsOk = async ()=>{
		let res = await request({
			url: "prediction/driver/rz/" + forms.value.id,
			method: "put",
			data: forms.value,
		})
		if(res.code == 200){
			Message.success('审核完成！')
			crudRef.value.requestData();
			return true
		}else{
			Message.error(res.message)
			return false
		}
		
	}
	const options = reactive({
		id: "flyos_prediction_driver",
		rowSelection: {
			showCheckedAll: true,
		},
		pk: "id",
		operationColumn: true,
		operationColumnWidth: 200,
		formOption: {
			viewType: "modal",
			width: 600,
		},
		api: predictionDriver.getList,
		recycleApi: predictionDriver.getRecycleList,
		add: {
			show: false,
		},
		// edit: {
		// 	show: true,
		// 	api: predictionDriver.update,
		// 	auth: ["prediction:driver:update"],
		// },
		delete: {
			show: true,
			api: predictionDriver.deletes,
			auth: ["prediction:driver:delete"],
			realApi: predictionDriver.realDeletes,
			realAuth: ["prediction:driver:realDeletes"],
		},
		recovery: {
			show: true,
			api: predictionDriver.recoverys,
			auth: ["prediction:driver:recovery"],
		},
		import: {
			show: true,
			url: "prediction/driver/import",
			
			templateUrl: "prediction/driver/downloadTemplate",
			auth: ["prediction:driver:import"],
		},
		export: {
			show: true,
			url: "prediction/driver/export",
			auth: ["prediction:driver:export"],
		},
		afterRequest: (params) => {
			params.map((v, i) => {
				if(v.car.length != 0){
					v.car_no = v.car
				}
				
			});
		},
	});

	const columns = reactive([
		{
			title: "ID",
			dataIndex: "id",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			align: "center",
			hide: true,
			commonRules: {
				required: true,
				message: "请输入ID",
			},
		},
		{
			title: "公司名称",
			dataIndex: "dept_id",
			align: "center",
			formType: "select",
			search: true,
			width:180,
			dict: {
				// 远程通用接口请求，新版代码生成都有一个 remote 接口
				remote: "system/dept/remote",
				// 指定组件接收的props
				props: { label: "name", value: "id" },
				// 开启分页
				openPage: false,
				// 远程请求配置项
				remoteOption: {
					// 按用户名排序
					sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
					// 设置查询的字段
					select: ["id", "name"],
					// 设置数据过滤
					filter: {
						type:['>',1],
						status: ['=',1]
					},
					// 关联模型
					relations: [],
				},
				translation: true,
			},
		},
		{
			title: "账号",
			dataIndex: "duser.username",
			align: "center",
			width:180,
			formType: "input",
		},
		{
			title: "司机姓名",
			dataIndex: "driver_name",
			align: "center",
			formType: "input",
			search: true,
		},
		{
			title: "司机身份证号码",
			dataIndex: "drive_crad",
			align: "center",
			width:180,
			formType: "input",
			search: true,
		},
		{
			title: "手机号码",
			dataIndex: "mobile",
			align: "center",
			formType: "input",
			
			search: true,
		},
		{
			title: "车号",
			dataIndex: "car_no",
			align: "center",
			formType: "input",
			search: true,
		},
		
		{
			title: "驾驶证照片",
			dataIndex: "jiashizheng",
			formType: "upload",
			type: "image",
		},
		{
			title: "身份证正面照",
			dataIndex: "card_front",
			formType: "upload",
			type: "image",
		},
		{
			title: "身份证反面照",
			dataIndex: "card_back",
			formType: "upload",
			type: "image",
		},
		{
			
			title: "道路许可证",
			dataIndex: "daoluxukezheng",
			formType: "upload",
			type: "image",
		},
		
		// {
		// 	title: "司机用户ID",
		// 	dataIndex: "driver_user_id",
		// 	align: "center",
		// 	formType: "select",
		// 	search: true,
		// 	dict: {
		// 		// 远程通用接口请求，新版代码生成都有一个 remote 接口
		// 		remote: "system/user/remote",
		// 		// 指定组件接收的props
		// 		props: { label: "nickname", value: "id" },
		// 		// 开启分页
		// 		openPage: false,
		// 		// 远程请求配置项
		// 		remoteOption: {
		// 			// 按用户名排序
		// 			sort: { username: "desc" }, // 如果不指定排序方式，默认为正序排序
		// 			// 设置查询的字段
		// 			select: ["id", "nickname"],
		// 			// 设置数据过滤
		// 			filter: {},
		// 			// 关联模型
		// 			relations: [],
		// 		},
		// 	},
		// },
		{
			title: "认证状态",
			dataIndex: "driver_status",
			formType: "select",
			search: false,
			hide:true,
			dict: {
			data: [
				{
				label: "未认证",
				value: "0"
				},
				{
				label: "已认证",
				value: "1"
				},
				{
				label: "已驳回",
				value: "2"
				},
				{
				label: "审核中",
				value: "3"
				}
			],
			translation: true,
			tagColors: {
				0: "#86909c",
				1: "#00b42a",
				2: "#f53f3f",
				3: '#ff7d00',
			},
			}
		},
		
		{
			title: "创建时间",
			dataIndex: "created_at",
			formType: "range",
			search: true,
			align: "center",
			addDisplay: false,
			width:180,
			editDisplay: false,
			sortable: {
				sortDirections: ["ascend", "descend"],
				sorter: true,
			},
			showTime: true,
		},
		{
			title: "备注",
			dataIndex: "remark",
			formType: "input",
		},
		{
			title: "修改时间",
			dataIndex: "updated_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			showTime: true,
		},
		{
			title: "删除时间",
			dataIndex: "deleted_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			showTime: true,
		},
		{
			title: "创建人",
			dataIndex: "created_by",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			hide: true,
		},
		{
			title: "更新人",
			dataIndex: "updated_by",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			hide: true,
		},
	]);

	const visibleRecord = ref(false);
	const types = ref(1)
	const forms = ref({
		// 司机姓名
		driver_name: "",
		// 司机身份证号码
		drive_crad: "",
		// 手机号码
		mobile: "",
		// 所属用户
		dept_id: "",
		// 司机驾驶证
		driver_license: "",
		// 身份证正面
		card_front: "",
		// 身份证反面
		card_back: "",
		id:'',
	})
	const addDriver = () => {
		forms.value = {
			// 司机姓名
			driver_name: "",
			// 司机身份证号码
			drive_crad: "",
			// 手机号码
			mobile: "",
			// 所属用户
			dept_id: "",
			// 司机驾驶证
			driver_license: "",
			// 身份证正面
			card_front: "",
			// 身份证反面
			card_back: "",
			id:'',
		}
		types.value = 1
		visibleRecord.value = true;
	};

	function update() {
		visibleRecord.value = false;
		crudRef.value.requestData();
		// crudRef.value.refresh();
	}

	function eidtDriver(e) {
		console.log(e);
		forms.value = {
			// 司机姓名
			driver_name: e.driver_name,
			// 司机身份证号码
			drive_crad: e.drive_crad,
			// 手机号码
			mobile: e.mobile,
			// 所属用户
			dept_id: e.dept_id,
			// 司机驾驶证
			driver_license: e.driver_license,
			// 身份证正面
			card_front: e.card_front,
			// 身份证反面
			card_back: e.card_back,
			id:e.id
		}
		types.value = 2
		visibleRecord.value = true;
	}
	const shenheDriver = (e) =>{
		forms.value = {
			// 司机姓名
			driver_name: e.driver_name,
			// 司机身份证号码
			drive_crad: e.drive_crad,
			// 手机号码
			mobile: e.mobile,
			// 所属用户
			dept_id: e.dept_id,
			// 司机驾驶证
			driver_license: e.driver_license,
			// 身份证正面
			card_front: e.card_front,
			// 身份证反面
			card_back: e.card_back,
			id:e.id,
			driver_status:e.driver_status,
			deptname:e.dept.name,
			remark:e.remark
		}
		visibleShenhe.value = true;
	}
</script>
<script>
	export default { name: "prediction:driver" };
</script>

<style lang="less" scoped>
	.edit {
		padding: 0;
		::v-deep .arco-btn-icon {
			margin-right: 0;
		}
	}
</style>
